<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="my" uri="/mytags" %>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户管理</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/asserts/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
	
		<!-- js插件 -->
		<script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
		<script src="${pageContext.request.contextPath}/asserts/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/asserts/bootstrapValidate/css/bootstrapValidator.min.css"/>
 	   <script src="${pageContext.request.contextPath}/asserts/bootstrapValidate/js/bootstrapValidator.min.js"></script>
	
	</head>
	<body>
			<!-- 内容展示区 -->
			<div >
					<!-- 导航 -->
					<ol class="breadcrumb">
						<li><i class="fa fa-comment"></i> 用户管理</li>
					</ol>
					<div class="container-fluid">
						<!-- 	内容面板 -->
						<div class="panel panel-default">
							<!-- 控制按钮 -->
							<div class="panel-heading">
									<div class="btn-group">
										<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal" onclick="toAdd()" ><span class="glyphicon glyphicon-pencil"></span>添加用户</button>
									</div>
							</div><!-- 控制按钮  end-->
							<div class="panel-body">
								<form action="${pageContext.request.contextPath}/user/list" method="post"  class="form-horizontal" >
								     <div class="form-group">
										<label class="control-label col-md-3">用户账号：</label>
										<div class="col-md-5">
											<input type="text" name="usercode" value="${usercode}" placeholder="请输入账号" class="form-control"  />
										
										</div>
										<div class="col-md-2">
												<button class="btn btn-success">查询</button>
										</div>
									</div>
									 
								</form>
								<table class="table table-bordered table-striped table-condensed table-hover">
									<tr>
										<th width="5%"><input type="checkbox" name="" id="selectAll" /></th>
										<th width="5%">ID</th>
										<th width="20%">用户账号</th>
										<th width="10%">密码</th>
										<th width="10%">账号级别</th>
										<th width="10%">所属镇</th>
										<th width="10%">所属学校</th>
										<th width="10%">操作</th>
									</tr>
									<!-- 数据绑定 -->
									<c:forEach items="${pageInfo.list}" var="u">
									<tr>
										<td><input type="checkbox" name="" class="eid" id="" /></td>
										<td>${u.id }</td>
										<td>${u.usercode }</td>
										<td>${u.password }</td>
									    <td>${u.userlevel}</td>
									     <td>${u.zname}</td>
									      <td>${u.xxname}</td>
										<td>
											 <button type="button" class="btn btn-danger" onclick="del(${u.id})"> 
											 	<span class="glyphicon glyphicon-remove"></span> 删除</button>
											 
										</td>
									</tr>
									</c:forEach>	
								  
									<!-- 	数据绑定 end -->
								</table>
								<!-- 	分页 -->
										<!-- 	分页 -->
								 <my:page prePage="${pageInfo.prePage}" nextPage="${pageInfo.nextPage}"   url="${pageContext.request.contextPath}/user/list?n=1" totalPage="${pageInfo.pages}"
								  currentPage="${pageInfo.pageNum}"/>
							</div>
						</div><!-- 内容面板 end -->
					</div>
			</div><!-- 	内容展示区 end-->
	 
		
		<!-- 弹层组件 添加标签 -->
		<div class="modal fade" id="mymodal">
			<div class="modal-dialog">
				<div class="modal-content">
					<form id="myform" action="${pageContext.request.contextPath}/user/add"  class="form-horizontal">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title" id="mylabel">录入用户信息</h4>
						</div>
						<div class="modal-body">
							  
							  
								<div class="form-group">
									<label class="control-label col-md-3">用户账号：</label>
									<div class="col-md-8">
										<input type="text" name="usercode" placeholder="请输入账号" class="form-control"  />
									</div>
								</div>
								  <div class="form-group">
									<label class="control-label col-md-3">用户密码：</label>
									<div class="col-md-8">
										<input type="text" name="passwordusercode" placeholder="请输入密码" class="form-control"  />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">用户角色：</label>
									<div class="col-md-8">
										<select id="roleid" name="roleid" class="form-control">
											<option value="">请选择</option>
											<option value="1">校级别账户</option>
											<option value="2">镇级别账户</option>
											<option value="3">县级别账户</option>
											<option value="4">后台管理员账户</option>
 										</select> 
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">所属镇：</label>
									<div class="col-md-8">
										<select id="zid" name="zid" class="form-control" onchange="getXx(this)">
											<option value="0">请选择</option>
											 
 										</select> 
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">所属哪所学校：</label>
									<div class="col-md-8">
										<select id="xxid" name="xxid" class="form-control">
											<option value="0">请选择</option>
											 
 										</select> 
									</div>
								</div>
								
								 
						</div>
						<div class="modal-footer">
							<button class="btn btn-danger" type="button">关闭</button>
							<button class="btn btn-primary" type="submit">录入</button>
						</div>
					</form>
				</div>
			</div>
		</div><!-- 弹层组件 添加标签 end -->
		
	 
	</body>
</html>
<script>
	 $(function () {
	  
        $('#myform').bootstrapValidator({
　　　　　　　　message: 'This value is not valid',
            　feedbackIcons: {
                　　　　　　　　valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'
            　　　　　　　　   },
            fields: {
            	usercode: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户账号不能为空'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                } ,
                roleid: {
                    validators: {
                        notEmpty: {
                            message: '用户角色不能为空'
                        }
                    }
                } 
            } ,
            submitHandler: function (validator, form, submitButton) {
              // alert("submit");
                 //获取用户角色    
                 var roleid = $("#roleid").val();
            	 var zid=$("#zid").val();
            	 var xxid = $("#xxid").val();
                 if(roleid==1){
                	 //两个字段必填 
                
                	 if(zid=='0'){
                		 alert("所属镇必填");
                		 return false;
                	 }
                	 if(xxid=='0'){
                		 alert("所属学校必填");
                		 return false;
                	 }
                 }else if(roleid==2){
                	 if(zid=='0'){
                		 alert("所属镇必填");
                		 return false;
                	 }
                 }
              
            }
        });
    });
	 
	 function del(id){
		var flag =  confirm("确认是否要删除吗？");
		var path =''
		
		if(flag){
			location.href="delete?uid="+id;
		}
	 }
	 // 点击添加按钮
	 function toAdd(){
		 //ajax  查询 公安县 下所有的镇 
			$.ajax({
				url : '../ztree/getBaseInfo?pid=2',
				type : "get",
				dataType : "json",
				success : function(data) {
					$("#zid option:gt(0)").remove();
					for(var i=0;i<data.length;i++){
						var opt = "<option value='"+data[i].id+"'>"+data[i].name+"</optoin>";
						$("#zid").append(opt);
					}
				},
				error : function(xhr) {
					alert(xhr.status);
				}
			});
	 }
	 function getXx(obj){
		 //获取用户级别 
		var roleid = $("#roleid").val();
		 if(roleid==''){
			 alert("请选择用户级别");
			 return ;
		 }
		 //校级别用户
		 if(roleid==1){
			 var  zid = obj.value;
			 //ajax  查询  所选镇对应的学校
			  $.ajax({
					url : '../ztree/getBaseInfo?pid='+zid,
					type : "get",
					dataType : "json",
					success : function(data) {
						$("#xxid option:gt(0)").remove();
						for(var i=0;i<data.length;i++){
							var opt = "<option value='"+data[i].id+"'>"+data[i].name+"</optoin>";
							$("#xxid").append(opt);
						}
						 
					},
					error : function(xhr) {
						alert(xhr.status);
					}
				});
		 }
	 }
	 document.documentElement.style.overflowY = 'hidden';
</script>